<template>
	 <div class="login-container">
	  <el-form 
       :model="userForm"
       ref="loginForm"
       :rules="rules"
	     class="login-form">
	       <div class="login-title">
             <span>仿今日头条后台管理系统</span>
            </div>
      <el-form-item  prop="mobile">
        <el-input
          autocomplete
          v-model="userForm.mobile"
          placeholder="请输入你的账号"
          @keyup.enter.native="onHandleLogin"
        ></el-input>
      </el-form-item>
      <el-form-item  prop="code">
        <el-input
        
          v-model="userForm.code"
          placeholder="请输入你的密码"
          @keyup.enter.native="onHandleLogin"

        ></el-input>
      </el-form-item>
      <el-checkbox v-model="rememberMe">记住我&nbsp;</el-checkbox>
      <el-tooltip
        effect="light"
        content="点击记住我并且登录成功后,下次登录时会自动填充账号密码"
        placement="top-start"
      >
        <i class="el-icon-question"></i>
      </el-tooltip>
      <el-form-item prop="isAgree" label-width="0px">
        <el-checkbox v-model="userForm.isAgree">我已同意相关条款</el-checkbox>
      </el-form-item>
      <div class="btn-container">
        <el-form-item ref="btn" label-width="5px">
          <el-button type="primary" @click="onHandleLogin" :loading="isLogin" class="login-btn">{{
            isLogin ? '登录中' : '登录'
          }}</el-button>
        </el-form-item>
      </div>
       </el-form>
	 </div>
</template>
<script type="text/javascript">
  import  login from '@/api/user.js' 
    
	export default {
	  name : '',
	  data () {

      var checkIsAgree = (rule, value, callback) => {
          if(value) callback();else callback(new Error('请先同意协议'));
      };

	  	return {
	      userForm: {
	        mobile: '13911111111',
	        code: '246810',
	        isAgree: false,
    
	      },
	      rememberMe: false,
	      isLogin : false,
        rules: {
          mobile: [ 
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 11, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          code : [
            { required : true , message : '密码不能为空', trigger : 'blur'}
          ],
          isAgree: [
            { validator: checkIsAgree, trigger: 'change' },
          ],
        }	
	  	}
	  },
	  methods : {
      onHandleLogin () {
           this.$refs['loginForm'].validate((validate,err)=>{
                if(!validate)
                {
                   return
                }
                this.login();
            })   
        },
      async login () {
           try{
              this.isLogin = true

              const user = this.userForm
              
              const res = await login(user);
            
              console.info(res);

              if(res)
              {
                 this.$message({
                    message: '登录成功',
                    type: 'success'
                 })

                 this.isLogin = false

                 this.$router.push('/')
              }
              
            }catch(err){
                  this.$message.error({
                    message: '登录失败,手机或者验证码错误'
                  })   

                  this.isLogin = false       
            }          
        }
	  }
	}
</script>

<style scoped lang="less">
  .login-container {
     position: absolute;
     top: 0;left: 0;
     bottom: 0;right: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     background:url("../../assets//images/login/1.jpg") no-repeat;
    .login-form {
    	background:#fff;
    	padding:30px;
    	min-width:300px;
       .login-title {
    	  width:100%;
    	  height:50px;
    	  text-align: center;
    	  font-weight:600;
    	  font-size:20px;
    	  margin-bottom:15px;
        } 
        .btn-container {
        	width:100%;
        	.login-btn {
        		width:100%;
        	}
        }   	
    }

  }
  
</style>